import React from 'react';
import {connect} from 'react-redux';
import HeadNavComponent from "../../../components/headNav";
import request from "../../../assets/js/utils/request";
import {AuthRoute,LocalParam,GoPagePush,lazyImg} from '../../../assets/js/utils/index';
import Css from '../../../assets/css/user/order/index.css';
class orderDetail extends React.Component{
    constructor(props){
        super(props);
        AuthRoute(props);
        this.state={
            orderNumber:LocalParam(props.location.search).search.ordernumber?LocalParam(props.location.search).search.ordernumber:'',
            addressName:'',
            addressCellphonr:'',
            addressArech:'',
            orderStatus:'',
            orderTotal:'',
            orderFreight:'',
            orderTrueTotal:'',
            orderTime:'',
            aDetail:[]
        }
    }

    componentDidMount(){
        this.getDataOrderDetail()
    }
    getDataOrderDetail(){
        let sUrl=window.base.config.baseUrl+'/user/myorder/desc?uid='+this.props.state.redLogin.uid+'&ordernum='+this.state.orderNumber+'&token='+window.base.config.token;
        request(sUrl,'get').then((res)=>{
            if (res.code===200){
                this.setState({
                    addressName:res.data.name,
                    addressCellphonr:res.data.cellphone,
                    addressArech:`${res.data.province}${res.data.city}${res.data.area}`,
                    orderStatus:res.data.status='0'?'待付款':res.data.status='1'?'待收货':res.data.status='2'?'待评价':'',
                    orderTotal:res.data.total,
                    orderFreight:res.data.freight,
                    orderTrueTotal:res.data.truetotal,
                    orderTime:res.data.ordertime,
                    aDetail:res.data.goods
                },()=>{
                    lazyImg()
                })
            }
        })
    }
    goPage(url){
        GoPagePush(this.props,url)
    }
    componentWillUnmount(){
        this.setState = (state, callback) => {
            return;
        };
    }
    render(){
        return(
            <div className={Css['main']+' '+Css['pt100']}>
                <HeadNavComponent title='订单详情'></HeadNavComponent>
                <div className={Css["detaile_title"]}>订单编号：{this.state.orderNumber}</div>
                <div className={Css['detail_skew_box']}>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                </div>
                <div className={Css['address_info']}>
                    <div className={Css['address_name']}>
                        <i className={'personal'}></i>{this.state.addressName}
                    </div>
                    <div className={Css['address_cellphone']}>
                        <i className={'mobile'}></i>{this.state.addressCellphonr}
                    </div>
                    <div className={Css['address_detail']}>{this.state.addressArech}</div>
                </div>
                <div className={Css['detail_skew_box']}>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                    <div className={Css['detail_shew']}></div>
                </div>
                <div className={Css["detaile_title"]}>购买的宝贝</div>
                {
                    this.state.aDetail.length>0?
                        this.state.aDetail.map((item,index)=>{
                            return(
                                <div className={Css['detail_group']} key={index} onClick={this.goPage.bind(this,'goods/details/commodity?gid='+item.gid)}>
                                    <div className={Css['detail_row']}>
                                        <div className={Css['detail_row_img']}>
                                            <img  src={require('../../../assets/images/commen/lazyImg.jpg')} data-echo={item.image} alt=''/>
                                        </div>
                                    </div>
                                    <div className={Css['detail_row']}>
                                        <div className={Css['detail_goods_title']}>{item.title}</div>
                                        <div className={Css['detail_goods_attr']}>
                                            <span>X {item.amount}</span>
                                            {
                                                item.param.length>0&&item.param!==null?
                                                    item.param.map((item2,index2)=>{
                                                        console.log(item2)
                                                        return(
                                                            <span key={index2}>{item2.title}:
                                                                {
                                                                    item2.param.length>0&&item2.param!==null?
                                                                        item2.param.map((item3,index3)=>{
                                                                            return(
                                                                                <React.Fragment key={index3} >{item3.title}</React.Fragment>
                                                                            )
                                                                        })
                                                                        :''
                                                                }
                                                            </span>
                                                        )
                                                    })
                                                    :''
                                            }

                                        </div>
                                    </div>
                                    <div className={Css['detail_row']}>
                                        ￥{item.price}
                                    </div>
                                </div>
                            )
                        })
                    :''
                }

                <div className={Css['detail_group']}>
                    <div className={Css['detail_row']}>
                        支付状态
                    </div>
                    <div className={Css['detail_row']}>
                        {this.state.orderStatus}
                    </div>
                </div>
                <div className={Css['detail_group']}>
                    <div className={Css['detail_row']}>
                        商品总额
                    </div>
                    <div className={Css['detail_row']+' '+Css['red']}>
                        ¥{this.state.orderTotal}
                    </div>
                </div>
                <div className={Css['detail_group']}>
                    <div className={Css['detail_row']}>
                        +运费
                    </div>
                    <div className={Css['detail_row']+' '+Css['red']}>
                        ¥{this.state.orderFreight}
                    </div>
                </div>
                <div className={Css['detail_group']}>
                    <div className={Css['detail_row']}>

                    </div>
                    <div className={Css['detail_row']}>
                        <div className={Css['detail_total']}> 实付金额：<span className={Css['red']}>¥{this.state.orderTrueTotal}</span></div>
                        <div className={Css['detail_time']}> 下单时间：{this.state.orderTime}</div>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect((state)=>{
    return{
        state:state
    }
})(orderDetail)